<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的使用</title>
    <!-- 引入vue, 开发环境 -->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app {
            font-size: 20px;
            color:  green;
        }
        .f_r {
            color:  red;
        }
    </style>
</head>
<body>
    <h1>Vue的使用</h1>
    <div id="app">
        <p>{{ message }}</p>
        <p class="f_r">{{ loginMsg }}</p>
        <p>
            <a v-bind:href="baidu_url" target="_blank">百度</a>
            <a :href="tengxun_url" target="_blank">腾讯</a>
        </p>
        <hr>
        <!-- if条件渲染 -->
        <!-- v-if语句 -->
        <p v-if="seen">你能看见我吗?</p>
        <!-- v-if语句 和 v-else -->
        <p v-if="isLogin">个人中心</p>
        <p v-else>登入</p>
        <!-- v-if , v-else-if, v-else -->
        <p>
            成绩等级:
            <span v-if="level === 1">A</span>
            <span v-else-if="level === 1">B</span>
            <span v-else-if="level === 1">C</span>
            <span v-else>D</span>
            <hr>
            <h2>事件 methods</h2>
            <p>
                <button v-on:click="login">登录</button>
                <button v-on:click="login2('李思思')">显示姓名登录</button>
                <button v-on:click="add(80, 40)">两个数加法</button>
            </p>
        </p>
        <hr>
        <h2>model表单输入绑定(双向绑定数据)</h2>
        <div class="input01">
            <input type="number" v-model="num1">
            <select v-model="operator">
                <option value="+"> + </option>
                <option value="-"> - </option>
                <option value="*"> * </option>
                <option value="/"> / </option>
            </select>
            <input type="number" v-model="num2">
            <button @click="num_operator"> = </button>
            [[ result ]]
            <p>[[ num1 ]] [[ operator  ]] [[ num2  ]] = [[ result  ]]</p>
        </div>
    </div>


    <script type="text/javascript">
        var app = new Vue({
            el: '#app',  // 获取页面标记对象 <div id="app"></div>
            delimiters: ['[[', ']]'],
            data: {
                message: '欢迎您 Vue!!!',
                loginMsg: '用户名或密码不正确',
                baidu_url: 'https://www.baidu.com',
                tengxun_url: 'https://www.qq.com',
                seen: true,
                isLogin: false,
                level: 2,
                num1: 0,
                num2: 0,
                result: 0,
                operator: '+'
            },
            // 事件
            methods: {
                login: function() {
                    alert('欢迎您登陆! ! ! ');
                },
                login2: function(name) {
                    alert('欢迎您登录! ! ! ' + name);
                },
                add: function(a, b) {
                    result = a + b
                    alert(a + ' + ' + b + ' = ' + result);
                },
                sub: function(a, b) {
                    result = a - b
                    alert(a + ' - ' + b + ' = ' +result);
                },
                num_operator: function() {
                    if (this.operator == '+')
                    this.result = parseInt(this.num1) + parseInt(this.num2)
                    else if(this.operator == '-')
                        this.result = this.num1 - this.num2;
                    else if(this.operator == '*')
                        this.result = this.num1 * this.num2;
                    else if(this.operator == '/')
                        this.result = this.num1 / this.num2;
                    else
                        this.result = 0
                },
            },
        });
    </script>
</body>
</html>